<template>
  <!-- 账期额度 -->
  <div class="account-priod-amount">
    <div class="account-period-amount-con">
      <el-button type="primary" size="small" @click="addItems()">{{
        $t('添加')
      }}</el-button>
      <div class="account-period-amount-list">
        <div
          v-for="(item, index) in dataList"
          :key="item.id"
          class="account-period-amount-item"
        >
          <el-input
            v-model="item.amountMoney"
            v-FormatMoney="item.amountMoney"
            :disabled="readonly"
            @input="(arg) => change(arg, 'amountMoney')"
          ></el-input>
          <el-select
            v-model="item.code"
            style="margin: 0px 12px"
            :disabled="readonly"
            @change="(arg) => change(arg, 'currency', item)"
          >
            <el-option
              v-for="currency in currencyList"
              :key="currency.value"
              :label="currency.label"
              :value="currency.value"
            ></el-option>
          </el-select>
          <el-button type="text" @click="deleteCurrency(index)">{{
            $t('删除')
          }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'accountPeriodAmount',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: [String, Array],
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    let vm = this
    return {
      currencyList: [
        {
          label: this.$t('CNY人民币'),
          value: 1,
        },
        {
          label: this.$t('USD美元'),
          value: 2,
        },
      ],

      rules: {
        accountPeriodAmount: [
          {
            validator: (rule, value, callback) => {
              if (this.parameter.state != 4 && this.parameter.fillFlag != 0) {
                callback()
                return
              }
              if (value) {
                let text = null
                let checkedCodes = []
                vm.dataList.forEach((it) => {
                  let reg = /^\d{1,13}\.?\d{0,2}$/
                  if (text) {
                    return
                  }
                  if (!it.amountMoney || !it.code) {
                    text = this.$t('金额和币种必填')
                  }
                  if (it.amountMoney && !reg.test(it.amountMoney)) {
                    text = this.$t(
                      '请输入小数点前13位以内，小数点后2位以内的数字'
                    )
                  }
                  if (it.code && checkedCodes.includes(it.code)) {
                    text = this.$t('同一币种不允许重复添加')
                  } else {
                    checkedCodes.push(it.code)
                  }
                })
                if (text) {
                  callback(new Error(text))
                  return
                }
                callback()
              } else {
                callback()
              }
            },
            trigger: 'change',
            type: 'array',
          },
        ],
      },
      readonly: false,
      dataList: [],
    }
  },
  created() {
    if (this.value) {
      this.setData()
    }
    this.$emit('setrules', this.parameter, {
      [this.parameter.parameterNumber]: this.rules.accountPeriodAmount,
    })
    this.readonly = Boolean(this.$route.query.readonly) || this.disabled
  },
  methods: {
    setData() {
      let list = JSON.parse(JSON.parse(this.value))
      this.dataList = list.map((it) => {
        return {
          ...it,
          code: it.code ? Number(it.code) : 1,
        }
      })
    },
    addItems() {
      this.dataList.push({
        id: new Date().getTime(),
      })
    },
    deleteCurrency(index) {
      this.dataList.splice(index, 1)
      this.$emit('input', this.curredataListncyList)
    },
    change(data, name, item) {
      if (name == 'currency') {
        let currency = this.currencyList.find((it) => it.value == data)
        item.name = currency ? currency.label : ''
        item.type = data
      }
      this.$emit('input', this.dataList)
    },
    getData() {
      const data = JSON.stringify(this.dataList)
      return data
    },
  },
}
</script>
<style lang="scss">
.account-priod-amount {
  .account-period-amount-item {
    display: flex;
    margin-top: 12px;
  }
}
</style>
